<!DOCTYPE html>
<!--
  Copyright 2016 Google Inc. All rights reserved.
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
      https://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License
  -->
<html class="mdl-typography">
  <head>
    <meta charset="utf-8">
    <title>MDL Icon Toggle Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
    <style>
      .mdl-theme--dark {
        background: #303030;
        padding: 1rem;
        padding-top: 0;
      }
    </style>
    <script src="assets/material-design-lite.css.js" charset="utf-8"></script>
  </head>
  <body>
    <main>
      <h1>MDL Icon Toggle</h1>
      <section>
        <h2>Using material-icons</h2>
        <i id="add-to-favorites"
           class="mdl-icon-toggle material-icons"
           role="button"
           aria-label="Add to favorites"
           aria-pressed="false"
           tabindex="0"
           data-toggle-on='{"content": "favorite", "label": "Remove From Favorites"}'
           data-toggle-off='{"content": "favorite_border", "label": "Add to Favorites"}'>
          <!-- Prevent FOUC by putting the initial content in -->
          favorite_border
        </i>
        <p>Favorited? <span id="favorited-status">no</span></p>
      </section>
      <section>
        <h2>Using Font Awesome</h2>
        <span class="mdl-icon-toggle mdl-icon-toggle--on"
           role="button"
           aria-label="Unstar this item"
           aria-pressed="true"
           tabindex="0"
           data-icon-inner-selector=".fa"
           data-toggle-on='{"cssClass": "fa-star", "label": "Unstar this item"}'
           data-toggle-off='{"cssClass": "fa-star-o", "label": "Star this item"}'>
          <i class="fa fa-star" aria-hidden="true"></i>
        </span>
      </section>
      <section class="mdl-theme--dark">
        <h2 class="mdl-theme--text-primary-on-dark">Dark Theme</h2>
        <i id="add-to-favorites"
           class="mdl-icon-toggle material-icons"
           role="button"
           aria-label="Add to favorites"
           aria-pressed="false"
           tabindex="0"
           data-toggle-on='{"content": "favorite", "label": "Remove From Favorites"}'
           data-toggle-off='{"content": "favorite_border", "label": "Add to Favorites"}'>
          favorite_border
        </i>
      </section>
      <section>
        <h2>Primary Colored Icons</h2>
        <i id="add-to-favorites"
           class="mdl-icon-toggle mdl-icon-toggle--primary material-icons"
           role="button"
           aria-label="Add to favorites"
           aria-pressed="false"
           tabindex="0"
           data-toggle-on='{"content": "favorite", "label": "Remove From Favorites"}'
           data-toggle-off='{"content": "favorite_border", "label": "Add to Favorites"}'>
          favorite_border
        </i>
      </section>
      <section>
        <h2>Accent Colored Icons</h2>
        <i id="add-to-favorites"
           class="mdl-icon-toggle mdl-icon-toggle--accent material-icons"
           role="button"
           aria-label="Add to favorites"
           aria-pressed="false"
           tabindex="0"
           data-toggle-on='{"content": "favorite", "label": "Remove From Favorites"}'
           data-toggle-off='{"content": "favorite_border", "label": "Add to Favorites"}'>
          favorite_border
        </i>
      </section>
      <section>
        <h2>Disabled Icons</h2>
        <i id="add-to-favorites"
           class="mdl-icon-toggle mdl-icon-toggle--disabled material-icons"
           role="button"
           aria-label="Add to favorites"
           aria-pressed="false"
           aria-disabled="true"
           tabindex="-1"
           data-toggle-on='{"content": "favorite", "label": "Remove From Favorites"}'
           data-toggle-off='{"content": "favorite_border", "label": "Add to Favorites"}'>
          favorite_border
        </i>
        <div class="mdl-theme--dark">
          <i id="add-to-favorites"
             class="mdl-icon-toggle mdl-icon-toggle--disabled material-icons"
             role="button"
             aria-label="Add to favorites"
             aria-pressed="false"
             aria-disabled="true"
             tabindex="-1"
             data-toggle-on='{"content": "favorite", "label": "Remove From Favorites"}'
             data-toggle-off='{"content": "favorite_border", "label": "Add to Favorites"}'>
            favorite_border
          </i>
        </div>
      </section>
    </main>
    <script src="assets/material-design-lite.js" charset="utf-8"></script>
    <script>
      (function() {
        'use strict';

        var nodes = document.querySelectorAll('.mdl-icon-toggle');
        for (var i = 0, node; node = nodes[i]; i++) {
          mdl.iconToggle.MDLIconToggle.attachTo(node);
        }

        var addToFavorites = document.getElementById('add-to-favorites');
        var favoritedStatus = document.getElementById('favorited-status');
        addToFavorites.addEventListener('MDLIconToggle:change', function(evt) {
          var newStatus = evt.detail.isOn ? 'yes' : 'no';
          favoritedStatus.textContent = newStatus;
        });
      })();
    </script>
  </body>
</html>
